<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天天生鲜-水果节</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>


</head>

<body>
    <!-- 顶部导航 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand"><img src="images/logo.png" alt="logo"></a>
            </div>

            <div class="collapse navbar-collapse" id="mymenu">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">推荐商品</a></li>
                    <li><a href="#">手机生鲜</a></li>
                    <li><a href="#">抽奖</a></li>
                </ul>

                <form action="" class="navbar-form navbar-right">
                    <div class="form-group">
                        <div class="input-group ">
                            <input type="text" name="" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default "><span class="glyphicon glyphicon-search">
                                    </span></button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 巨幕 -->
    <div class="jumbotron">
        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
                    <!-- 响应式图片 img-responsive -->
                    <img src="images/banner_title.png" alt="天天生鲜" class="banner_title img-responsive">
                    <h2 class="banner_detail_title">水果节介绍</h2>
                    <p class="banner_detail">
                        在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
                    </p>
                </div>
                <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">
                    <img src="images/basket.png" alt="水果" class="img-responsive">
                </div>
            </div>


        </div>
    </div>
    <div class="container">
        <div class="row active-info">
            <h3 class="text-center">活动图片</h3>
            <p class="text-center">
                在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
            </p>
        </div>

        <div class="row active-pic-list">
            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                    <img src="images/active01.jpg" alt="">
                    <h4>现场采摘活动</h4>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                    <img src="images/active02.jpg" alt="">
                    <h4>现场采摘活动</h4>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                    <img src="images/active03.jpg" alt="">
                    <h4>现场采摘活动</h4>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                    <img src="images/active04.jpg" alt="">
                    <h4>现场采摘活动</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row goods_list">
            <div class="col-lg-2 ">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>

            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>

            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>

            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>

            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>
        </div>
    </div>


</body>

</html>